<template>
  <div class="goodsList">
    <!-- 头部组件 -->
    <Navbar title="商品列表" />

   <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-immediate-check="false"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="0"
    >
      <li v-for="(goods, index) in goodsList" :key="index">
        <!-- <router-link :to="{name:'goods.detail', query:{id:goods.id}}">
          <div class="new_img">
            <img :src="goods.img_url" alt />
          </div>
          <div class="content">
            <p class="title" :title="goods.title">{{goods.title}}</p>
            <div class="goods-desc">
              <p class="summary">{{goods.zhaiyao}}</p>
              <p>
                <span class="praise">点赞数: {{goods.click}}</span>
                <br />
                <span class="time">发表时间:{{goods.add_time | converTime('YYYY-MM-DD')}}</span>
              </p>
            </div>
          </div>
        </router-link>-->
        <!--  -->
        <!-- :bottom-all-loaded="allLoadede" -->
        <router-link :to="{name:'goods.detail', query:{id:goods.id}}">
          <!-- <img :src="goods.img_url" /> -->
          <!-- 图片懒加载 -->
            <img v-lazy="goods.img_url" />

          <div class="title">{{goods.title}}</div>
          <div class="desc">
            <div class="sell">
              <span>¥{{goods.sell_price}}</span>
              <s>¥{{goods.market_price}}</s>
            </div>
            <div class="detail">
              <div class="hot">热卖中</div>
              <div class="count">剩{{goods.stock_quantity}}件</div>
            </div>
          </div>
        </router-link>
      </li>

      <div ref="loadmore_wrapper" class="loadmore-wrapper">上拉加载更多。。。</div>
    </ul>

  </div>
    <!-- <mt-loadmore
      :bottom-method="loadBottom"
      :bottom-status-change="handleBottomChange"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      :auto-fill="autoFill"
    ></mt-loadmore>-->
</template>

<script>
/* 1. bottomLoad 函数
2.机制bottomload :bottom-all-loaded默认为false,可以上拉true 禁止上拉
3.auto-fill 默认为true,自动检测父容器,并调用bottomload直到撑满父容器
4.pul1拉动未满足7epx,drop达到7epx, loading加载中
5.1oadmore组件对象的onBottomLoaded()通知结束loading进入pull状态
6,在组件上写ref在js中通过this.Srefs.xxx获取的组件对象通过在普通标签写ref在js中通过thisrefs.xxx获取的dom对象7．
上拉加载更多公式进入检测机制 => 可视的高度 + 页面卷起的高度 = 设备的高度 */
export default {
  name: "goods.list",

  data() {
    return {
      goodsList: [],
      page: 1,
      loading: false,
      wrapperHeight: 0
      /* 可以将绑定到组件 bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。 */
      /* allLoaded: false,
      wrapperHeight: 0,
      autoFill: false */
    };
  },
  methods: {
    /* // 上拉加载的事件
    loadBottom() {
      console.log("上拉调用了");
      // 通知栏状态发生改变
      // 上拉加载数据
      this.loadeGoodsByPage();

      // 加载更多数据
      this.allLoaded = true; // 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded();
    },
    handleBottomChange(status) {
      console.log(status);
    }, */
    loadeGoodsByPage() {
      this.$axios
        .get(`getgoodslist?pageindex=${this.page}`)
        .then(res => {
          // console.log(res.data);

          if (res.data.length == 0) {
            this.$toast("没有数据了");
            this.loading = true;

            // 改变底部文字   加载更多
            this.$refs.loadmore_wrapper.innerHTML = "没有更多了哦 ♪(･ω･)ﾉ";
            this.$refs.loadmore_wrapper.style.backgroundImage = "linear-gradient(to right,pink,violet, orange)"
            // console.log(this.loading);
            return;
          }

          if (this.page > 1) {
            // console.log(this.page);
            // 表示加载更多
            // this.comments = this.comments.push.apply(this, [res.data]);
            this.goodsList = this.goodsList.concat(res.data);
          } else {
            // 否则第一次加载
            this.goodsList = res.data;
          }
          this.page++;
        })
        .catch(err => {
          console.log("商品列表获取异常", err);
        });
    },
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        this.loadeGoodsByPage();
        this.loading = false;
      }, 500);
      
    }
  },
  created() {
    this.loadeGoodsByPage();
  }
};
</script>

/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
.goodsList {
  width: 100%;
  height: 100%;
  margin-bottom: 55px;
}
.loadmore-wrapper {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(#e66465, #9198e5);
  text-align: center;
  color: #333;
  border-radius: 5px;
  margin-top: 10px;
}
.goodsList ul {
  display: flex;
  flex-wrap: wrap;
}
.goodsList ul li {
  width: 49%;
  border: 1px solid #888;
}
.goodsList ul li img {
  display: block;
  width: 100%;
}
.title {
  background-color: #ccc;
}
.desc {
  background-color: #ddd;
  font-size: 14px;
}
.desc .sell span {
  padding: 5px;
  color: #f00;
  font-weight: 800;
}
.detail {
  display: flex;
  justify-content: space-between;
  padding: 2px 5px;
  color: #666;
}
</style>